<!DOCTYPE html>
<html>
<head>

    <style>
        @import "css/jquery.idcode.css";
    </style>

    <meta charset="UTF-8">
    <link rel="stylesheet" href="../src/css/yddreset.css" />
    <link rel="stylesheet" href="../src/css/XDW-register.css" />
    <script src="css/jquery.js"></script>
    <script src="../src/css/XDW-register.js"></script>
    <script src="css/jquery.idcode.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/jquery-validation/jquery.validate.js"></script>
    <script src="js/jquery-validation/additional-methods.js"></script>
    <title></title>
    <style>
        label.error {
            color: red;
        }
        em{
            font-style: normal;
        }
        em.error {
            background: url("https://www.runoob.com/try/jquery/plugins/images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
        }

        em.success {
            background: url("https://www.runoob.com/try/jquery/plugins/images/checked.gif") no-repeat 0px 0px;
            padding-left: 16px;
        }
    </style>
</head>
<body>
<header id="header">

</header>


<div class="nav">
    <a class="newagg" href="https://www.newegg.cn"></a>
    <a class="txt"> | 新用户注册</a>

</div>


<section>

    <ul class="banner">
        <li class="txt" style="padding-left: 1130px">
            已是新蛋会员 现在<a href="#" style="color: red;">登录</a>
        </li>
        <li class="sprites">

        </li>
    </ul>

     <form>
             <div class="dd1">
            <label>
                用户名  :  <input name="uname" />
            </label>
        </div>
        <div class="dd2">
            <label>
                &nbsp;密码  : <input name="upwd"/>
            </label>
        </div>
        <div class="dd3">
            <label>
                图形验证码 : <input type="text" id="Txtidcode" class="txtVerification"> <span id="idcode"> </span>
                <a href="javascript:void(0)" class="change" style="color: #000000">看不清楚，换一张</a>

            </label>
        </div>
        <div class="dd4">
            <button>获取短信验证码</button>
        </div>
        </form>

</section>

<footer id="footer">

</footer>
</body>
</html>

<script>
    $(function () {
        //生成验证码
        $.idcode.setCode();
        $(".change").on("click", function () {
            $.idcode.setCode();//加载生成验证码方法
        })
         //自己定义的检测用户的规则
        $.validator.addMethod("checkedUser", function (val) {
            //字母开头不能是数字开头
            return /^[a-z]\w{5,17}$/i.test(val)

        })

            $("form").validate({
                rules: {
                    uname: {
                        required: true, //必填
                        checkedUser: true,
                    },
                    upwd: {
                        required: true, //必填
                        rangelength: [6, 16]
                    },
                },
// messages 规则是否合法 问题提示
                messages: {
                    uname: {
                        required: "用户名必填",
                        checkedUser: "用户名必须字母开头,6-18位",
                        remote: "改用户已存在"
                    },
                    upwd: {
                        required: "密码必填", //必填
                        rangelength: "密码长度必须是{0}-{1}"
                    },
                },
            //submitHandler 提交
            submitHandler: function () {
    console.log(111);
                var IsBy = $.idcode.validateCode()
                if (!IsBy) {
                    layer.msg("验证码错误");
                    return false;
                }
                  //准备参数,通过ajax发送服务器上
                console.log( $("form").serialize())
                $.ajax({
                    url: "../server/registerServer.php",
                    type: "post",
                    data: $("form").serialize(),
                    dataType: "json"
                }).then((res)=>{
                    console.log(res);
                    if (res.status == 1) {
                        layer.confirm(res.msg + ',是否去登录', {
                                icon: 1,
                                title: "登录提示",
                                btn: ['是的', '不去'] //按钮
                            },
                            function () {
                                location = "login.html"
                            },
                            function (index) {
                                layer.close(index)
                            });


                    } else if (res.status == -3) {
                        layer.confirm(res.msg + ',是否继续注册', {
                                icon: 2,
                                title: "登录提示",
                                btn: ['是的', '不去'] //按钮
                            },
                            function () {
                                location = "register.html"
                            },
                            function (index) {
                                layer.close(index)
                            });
                    }
                },(res)=>{
                    console.log(res)
                });
                return false;
            },


            })

    })


</script>





